<template>
	<view class="">
		<!--房源标题  -->
		<view class="house_title_box">
			<text class="house_title">{{details.name}} | {{details.content}}</text>
			<view class="pay_box">
				<text class="money">{{details.price}}</text>
				<text class="rent">万元</text>
			</view>
		</view>
		<!-- 房源详细信息 -->
		<view class="house_info_box">
			<view class="house_item_box">
				<text class="house_roomtype">{{details.car_model | getCarModel}}</text>
				<text class="house_layout">车型</text>
			</view>
			<view class="house_item_box">
				<text class="house_roomtype">{{details.list_time}}</text>
				<text class="house_layout">上市时间</text>
			</view>
			<view class="house_item_box">
				<text class="house_roomtype">{{details.energy}}</text>
				<text class="house_layout">能源</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			details: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {

			};
		},
		filters: {
			getCarModel(type) {
				switch (+type) {
					case 0:
						return 'SUV'
					case 1:
						return 'SRV'
					case 2:
						return 'CRV'
					case 3:
						return 'CUV'
					case 4:
						return 'RV'
					case 5:
						return 'HRV'
					case 6:
						return 'RAV'
					case 7:
						return 'MPV'
					case 8:
						return 'NCV'
					default:
						return '-'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.house_title_box {
		padding: 0 30upx;
		margin: 44upx auto 38upx;

		.house_title {
			font-size: 40upx;
			font-weight: 800;
			color: #3e3e3e;
		}

		.pay_box {
			margin-top: 36upx;
			display: flex;
			align-items: center;

			.money {
				font-size: 48upx;
				font-weight: 800;
				color: #ed5c47;
				margin-right: 8upx;
			}

			.type {
				font-size: 28upx;
				font-weight: 500;
				color: #333333;
				margin-top: 12upx;
			}

			.rent {
				margin: 12upx 36upx 0 10upx;
				font-size: 28upx;
				color: #fd4c38;
			}
		}
	}

	.house_info_box {
		padding: 46upx 0 40upx;
		border-bottom: 1px solid #e6e6e6;
		border-top: 1px solid #e6e6e6;
		margin: 0 30upx;
		display: flex;
		justify-content: space-between;

		.house_item_box {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.house_roomtype {
			font-size: 32upx;
			font-weight: 800;
			color: #3e3e3e;
		}

		.house_layout {
			font-size: 24upx;
			color: #707070;
			margin-top: 8upx;
		}

	}
</style>
